<template>
<vs-modal :show.sync="show" effect="fade" width="800px">
  <div class="modal-header" slot="modal-header">
    <h4 class="modal-title">{{$t('common.params')}}</h4>
  </div>  
  <div class="modal-body" slot="modal-body">
    <form class="form-horizontal">
      <div class="form-group">
        <label class="col-sm-3 control-label">{{$t('switch.params.interval')}}</label>
        <div class="col-sm-8">
          <select class="form-control" v-model="interval">
            <option v-for="option in intervalOptions">{{option}}</option>
          </select>
        </div>
      </div>    
    </form>
  </div>
  <div class="modal-footer" slot="modal-footer">
    <button type="button" class="btn btn-default" @click.prevent="onQuit">{{$t('common.quit')}}</button>
    <button type="button" class="btn btn-primary" @click.prevent="onStart">{{$t('common.start')}}</button>
  </div>    
</vs-modal>  
</template>

<script>
import _ from 'lodash'
import ebus from 'libs/ebus.js'
import toast from 'libs/toast.js'
import msgbox from 'libs/msgbox.js'
import locales from '../locales/vidLayout.js'
import * as actions from 'share/server/vuex/actions/multimedia.js'
import {loadLcdLayoutByName} from 'share/server/utils.js'
import {currLcdInfo} from 'share/server/vuex/getters.js'

export default {
  locales,
  vuex: {
    getters: {
      currLcdInfo,
      vidlayout: (state) => state.vidlayout
    },
    actions
  },
  data () {
    return {
      show: false,
      interval: 3,
      intervalOptions: [1, 3, 5, 10, 15, 20, 30],
      index: 0
    }
  },
  methods: {
    onQuit () {
      this.show = false
    },
    chooseLayout () {
      return _.find(this.vidlayout.list, function(item, index) {
        if (item._checked) {
          this.index = index + 1
          return true
        } else {
          return false
        }
      }.bind(this), this.index)
    },
    autoStart () {
      let layout = this.chooseLayout()
      let lcdInfo = this.currLcdInfo
      if (layout) {
        loadLcdLayoutByName(lcdInfo.topoId, layout.name)
      } else {
        this.index = 0
        this.autoStart()
      }
    },
    onStart () {
      this.index = 0
      let timer = setInterval(this.autoStart, this.interval * 1000)
      //let timer = setInterval(this.autoStart, 500)
      msgbox.alert({
        title: this.$t('alert.plzWait'),
        text: this.$t('alert.autoSwitch'),
        type: "info",
        showCancelButton: false,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: this.$t('common.stop'),
        closeOnConfirm: true
      }, 
      function() {
        clearInterval(timer)
      })    
      this.show = false
    },
    onShow () {
      this.show = true
    }
  },
  ready () {
    ebus.on('show-vid-layout-switch', this.onShow)
  }
}
</script>

<style>
</style>